<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DoYouHaoBaby示例：Ajax表单提交</title>
<link rel='stylesheet' type='text/css' href='{:__PUBLIC__}/Css/common.css'>
<import file="Js.Vendor.Jquery" />
<import file="Js.Dyhb#package" />
</head>
<body>

{script}
<!--
function add(){

	Dyhb.AjaxSubmit('form1','{:__URL__}/insert','result',complete);
}

function complete(data,status){

	if (status==1){
	// 更新列表
	$('#list').html(
	'<li style=\'font-weight:normal;background:#fc2745\'><div class="article_title">'+data.form_title+'</div>  <div class="article_detail">['+data.form_email+data.create_date+']</div><div class="content">'+data.form_content+'</div></li>'
	+$('#list').html());
  }
}
function checkTitle(){

	Dyhb.AjaxSend('{:__URL__}/check_title','ajax=1&title='+$('#title').val(),'result');
}
//-->
{/script}

<div class="main">
<div id='DyhbAjaxResult'></div>
<h2>DoYouHaoBaby示例之：Ajax表单提交</h2>
<div class="title">本示例同表单处理，只是改变提示方式为Ajax方式，采用了Dyhb.Ajax类库实现。其他Ajax类库的实现方式类似~</div>
<div id="result" class="none result" style="font-family:微软雅黑,Tahoma;letter-spacing:2px"></div>
<div class="line"></div>
<form id="form1" method='post' action="{:__URL__}/insert">
<table cellpadding=2 cellspacing=2>
<tr>
<td class="tRight" width="12%">标题：</td>
<td class="tLeft" ><input type="text" name="form_title" id="title" style="height:23px" class="large bLeft"> <input type="button" value="检 查" class="small button" onClick="checkTitle()"></td>
</tr>
<tr>
<td class="tRight" >邮箱：</td>
<td class="tLeft" ><input type="text" name="form_email" style="height:23px" class="huge bLeft"></td>
</tr>
<tr>
<td class="tRight tTop" >内容：</td>
<td><textarea name="form_content" class="huge bLeft" rows="8" cols="25"></textarea></td>
</tr>
<tr>
<td><input type="hidden" name="ajax" value="1"></td>
<td><input type="button" onClick="add()" class="button" value="提 交"> <input type="reset" class="button" value="清 空"></td>
</tr>
</table>
</form>

 <div class="line"></div>
<div class="article_list">
<div class="title">文章列表</div>
<ul id="list">
<foreach for=arrObjectList>
  <li>
	<div class="article_title">{$value:form_title}</div><div class="article_detail">[{$value:form_email} {$value:create_date|date='Y-m-d H:i:s',**}]</div>
    <div class="content">{$value:form_content}</div>
  </li>
</foreach>
</ul>
</div>

<div class="line"></div>
  <div class="title">示例源码</div><br/><div class="li_title">控制器IndexControl类</div><br/>
 <div class="code"><php>highlight_file( APP_PATH.'/App/Class/Controller/IndexController.class.php' )</php></div><br/>
 <div class="li_title">模型FormModel类</div><br/>
 <div class="code"><php>highlight_file( APP_PATH.'/App/Class/Model/FormModel.class.php' )</php>
 </div>
</div>
</body>
</html>